import { useEffect } from 'react'
import ReactDOM from 'react-dom'

export default function Portal({ children }) {
  const el = document.createElement('div')
  el.className = 'app-portal'

  useEffect(() => {
    const body = document.querySelector('body')
    body.appendChild(el)

    return () => body.removeChild(el)
  })

  return ReactDOM.createPortal(children, el)
}
